<template lang="html">
  <a-layout class="mail">
    <a-layout-content>
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item @click.native="$router.push({path: '/'})">首页</a-breadcrumb-item>
        <a-breadcrumb-item @click.native="$router.push({path: '/mailbox'})">局长信箱</a-breadcrumb-item>
        <a-breadcrumb-item>我要问政</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout>
        <div class="mail-wrapper">
          <a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
            <a-form-item
              label="主题"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FTitle"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入主题名称' }]}">
              <a-input />
            </a-form-item>
            <a-form-item
              label='保密等级'
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FIsSecret">
              <a-radio-group>
                <a-radio value='Open'>公开</a-radio>
                <a-radio value='Secret'>不公开</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="写信类型"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FAskingType">
              <a-select
                style="width: 32%;"
                onChange="">
                <a-select-option value='Advisory'>问政</a-select-option>
                <a-select-option value='Suggest'>建议</a-select-option>
                <a-select-option value='Complaint'>投诉</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="内容"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FContents"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入内容' }]}">
              <a-textarea placeholder="Basic usage" :rows="4"/>
            </a-form-item>
            <a-form-item
              label="来信人"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FLetterFrom"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入来信人' }]}">
              <a-input />
            </a-form-item>
            <a-form-item
              label="电话"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FMobile"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入电话' }]}">
              <a-input />
            </a-form-item>
            <a-form-item
              label="邮箱地址"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 12 }"
              fieldDecoratorId="FEmail"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入邮箱地址' }]}">
              <a-input />
            </a-form-item>
            <a-form-item  :wrapperCol="{ span: 12, offset: 5 }">
              <a-upload
                name="file"
                :multiple="true"
                action="`api/Ecp.Attachment.uploadEntityAttachmentNotCheck.jup`"
                :fileList="fileList"
                :beforeUpload="beforeUpload">
              <!-- <a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change=""> -->
                <a-button>
                  <a-icon type="upload" />附件上传
                </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 12, offset: 5 }">
              <a-button
                type='primary'
                htmlType='submit'
                style="margin-right: 16px;">
                提交留言
              </a-button>
              <a-button
                type='primary'
                htmlType='submit'>
                重新填写
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {invoke, getApiJson} from "@/api";
import reqwest from 'reqwest';
export default {
  data() {
    return {
      fileList: [],
      uploading: false,
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        invoke("api/WTM.NetizenAsking.createNotCheck", {
          data: [values]
        }).then((res) => {
            this.fileUpload(res.entityIds[0])
          })
        // if (!err) {
        //   console.log('Received values of form: ', values)
        // }
      })
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    fileUpload(entityId) {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach((file) => {
        formData.append("files[]", file)
      })
      this.uploading = true
      reqwest({
        url: `api/Ecp.Attachment.uploadEntityAttachmentNotCheck.jup?entityId=${entityId}`,
        method: 'post',
        processData: false,
        data: formData,
        success: () => {
          this.fileList = []
          this.uploading = false
          this.$message.success('提交成功！');
          this.$router.push({
            path: "/mailbox"
          })
        },
        error: (err) => {
          this.uploading = false
          this.$message.error(err.msg);
        },
      })
      // getApiJson("api/Ecp.Attachment.uploadEntityAttachmentNotCheck.jup", {
      //   entityId: entityId
      // }).then((res) => {
      //   this.uploading = false
      //   this.$notification['success']({
      //     message: '提交结果',
      //     description: '提交成功！',
      //   })
      // }).catch((err) => {
      //   this.$notification['error']({
      //     message: '错误',
      //     description: err.msg,
      //   })
      // })
    }
  }
}
</script>

<style lang="scss">
.mail {
  background: rgb(241, 242, 244) !important;

  .ant-breadcrumb {
    transition: all 0.28s ease;

    span:hover {
      color: #0666c8;
      cursor: pointer;
    }
  }

  .mail-wrapper {
    width: 1000px;
    padding: 48px 78px;
    background: #FFF;
  }
}
</style>
